<template>
	<div class="ele-body">
		<div class="top">
			<div>
				<el-button style="margin-left: 12px;" type="primary" icon="el-icon-circle-plus-outline"
					@click="copyData">添加备份</el-button>
        <el-button style="margin-left: 12px;" type="primary" icon="el-icon-delete"
          	@click="clearData">清空数据</el-button>
			</div>
		</div>
		<div style="margin-top: 18px;">
			<el-table :data="dataList" stripe style="width: 100%"  v-loading="loading">
				<el-table-column
              label="序号"
				      type="index"
				      width="120">
				    </el-table-column>
				<el-table-column prop="file" label="备份名称" min-width="120">
				</el-table-column>
				<el-table-column prop="date" label="备份时间" min-width="120">
				</el-table-column>
        <el-table-column prop="size" label="备份大小" min-width="120">
        </el-table-column>
				<el-table-column label="操作" min-width="120">
					<template slot-scope="scope">

            <el-button type="primary" @click="operate('restore ',scope.row)">还原
            </el-button>
						<el-button  type="danger" @click="operate('delete',scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="block" style="margin-top: 18px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				total: 0,
				dataList: [],
        loading: false,
        start:0,
        end:0
			}
		},
		mounted() {
			this.getlist();
		},
		methods: {
			//格式化时间
			formatDate(row, column) {
				let data = row[column.property]
				if (data == null) {
					return null
				}
				let dt = new Date(data * 1000)
				let Month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
				let Day = dt.getDate() < 10 ? '0' + (dt.getDate()) : dt.getDate();
				let Hours = dt.getHours() < 10 ? '0' + (dt.getHours()) : dt.getHours();
				let Minutes = dt.getMinutes() < 10 ? '0' + (dt.getMinutes()) : dt.getMinutes();
				let Seconds = dt.getSeconds() < 10 ? '0' + (dt.getSeconds()) : dt.getSeconds();
				return dt.getFullYear() + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds
			},
			//获取列表
			getlist() {
				this.$http.get('/back/baksql/list').then((res) => {
          this.start = (this.page - 1)* this.size 
          this.end = (this.start + this.size)
          console.log(this.start,this.end)
          this.total = res.data.data.list.length
          this.dataList = res.data.data.list.splice(this.start,this.end)
  
				});
			},
      // 备份数据
      copyData(){
        this.$confirm('此操作将添加一份备份，是否继续?', '提示', {
        	confirmButtonText: '是',
        	cancelButtonText: '否',
        	type: 'warning'
        }).then(()=> {
          this.$http.post('back/baksql/backup').then(res => {
            if(res.data.code == 1){
              
              this.$message({
              	message: res.data.msg,
              	type: 'success'
              });
              this.getlist()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(()=> {
          this.$message({
          	type: 'info',
          	message: '已取消操作'
          });
        })
      },
      // 还原或删除
      operate(option,row){
        let str
        if(option == 'delete'){
          str = '删除'
        } else  {
          str = '还原'
        }
        this.$confirm('此操作将' + str +'数据，是否继续?', '提示', {
        	confirmButtonText: '是',
        	cancelButtonText: '否',
        	type: 'warning'
        }).then(() => {
            this.loading = true
          this.$http.post('back/baksql/restore',{
            file: row.file,
            action:option
          }).then(res => {
            this.loading = false
            if(res.data.code == 1) {
              this.$message({
              	message: res.data.msg,
              	type: 'success'
              });
              this.getlist()
            } else {
              this.loading = false
              this.$message.error(res.data.msg)
            }
          })
        }).catch( () => {
           this.loading = false
          this.$message({
          	type: 'info',
          	message: '已取消操作'
          });
        })
      },
      //清空数据库
      clearData(){
        this.$confirm('此操作将清空数据库!是否继续?', '提示',{
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
           this.loading = true
          this.$http.post('back/baksql/onekeyClear').then((res) => {
            if(res.data.code == 1){
              this.loading = false
              this.$message({
              	message: res.data.msg,
              	type: 'success'
              });
            } else {
              this.loading = false
               this.$message.error(res.data.msg)
            }
          })
          
        }).catch(()=> {
          this.loading = false
          this.$message({
          	type: 'info',
          	message: '已取消操作'
          });
        })
      },
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
        
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getlist();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		align-items: center;
	}
</style>
